<template>
	<view>
		<view class="luckInfoContent">
			<!-- 顶部 -->
			<view class="luckTopInfo">
				<view class="luckrules">抽奖规则</view>
				<image class="lucktopImg" :src="topImgUrl"></image>
				<view class="shareBg">
					<image class="shareImg" :src="shareImgUrl"></image>
					<text style="margin-top: 38upx; margin-left: 5upx;">分享</text>
				</view>

			</view>

			<!-- 抽奖机 -->
			<view class="luckyInfo">
				<image class="machineImg" :src="machineImgUrl"></image>
				<image class="cjImg" :src="cjImgUrl"></image>
				<text class="winNumber">{{resultNumber}}</text>
				<view class="prizeBg">
					<slot-machine ref="myLucky" width="270px" height="80px" :slots="slots" :prizes="prizes"
						:defaultConfig="defaultConfig" @end="luckyDrawFinish"></slot-machine>
					<view class="playBtn" @click="getluckyDraw"></view>
					<view class="luckdrawRecord" @click="clickRecord"></view>
				</view>
				<view class="recordBox">
					<view class="recordBg">
						<tony-scroll :list="recordList"></tony-scroll>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>
<script>
	import setttings from '@/settings.js'
	import slotMachine from '@/components/@lucky-canvas/uni/slot-machine.vue'
	import tonyScroll from '@/components/tony-scroll/tony-scroll.vue'
	import {
		luckdrawPage
	} from '@/api/marketingB-helper.js'
	export default {
		components: {
			slotMachine,
			tonyScroll
		},
		data() {
			return {
				ruleShow: false,
				bgImgUrl: setttings.baseImageUrl + '/cj/chouJiangBg.png',
				topImgUrl: setttings.baseImageUrl + '/cj/topIcon.png',
				machineImgUrl: setttings.baseImageUrl + '/cj/choujiangMachine.png',
				shareImgUrl: setttings.baseImageUrl + '/cj/share.png',
				cjImgUrl: setttings.baseImageUrl + '/cj/choujiangBtn.png',
				listImgUrl: setttings.baseImageUrl + '/cj/bottomList.png',
				activityId: '',
				activityInfo: {},
				recordList: [{
								customerPhone : '135****3213',
								prize : '奖品名称'
							},{
								customerPhone : '135****3213',
								prize : '奖品名称'
							},{
								customerPhone : '135****3213',
								prize : '奖品名称'
							},{
								customerPhone : '135****3213',
								prize : '奖品名称'
							},{
								customerPhone : '135****3213',
								prize : '奖品名称'
							},],
				number: 12,
				slots: [{
					speed: 1
				}, ],
				prizes: [],
				defaultConfig: {
					mode: 'horizontal',
					rowSpacing: '10px',
					colSpacing: '10px'
				},
				resultNumber:0
			}
		},
		onLoad(op) {
			this.activityId = JSON.parse(op.param).bizNo;
			this.getData();
			
		},
		methods: {
			btnClick(){
				uni.showToast({
				    title: "演示页面,请前往客户端操作!",
				    icon: 'none'
				})
			},
			//获取抽奖页面数据
			getData() {
				luckdrawPage({
					bizNo:this.activityId
				}).then(res => {
					this.activityInfo = res.data;
					this.resultNumber = res.data.inventedJoinNumber.toString().padStart(5, '0');
					var prizeData = res.data.prize;
					for (var i = 0; i < prizeData.length; i++) {
						let p = prizeData[i];
						this.prizes.push({
							borderRadius: '10px',
							fonts: [{
								text: p.prizeName,
								top: '60upx',
								fontColor: '#F17559',
								fontSize: '12',
								id: p.id,
								index: i,
							}, ],
							imgs: [{
								src: setttings.baseImageUrl + p.url || '/xxhg.png',
								top: '10upx',
								width: '70upx',
								height: '40upx'
							}]
						})
					}
					setTimeout(() => {
						this.$refs.myLucky.play();
					}, 1000)
				})
			}
		
		}
	}
</script>

<style lang="scss" scoped>
	.luckInfoContent {
		background: no-repeat url('https://sj.shopec.com.cn/image-server/cj/chouJiangBg.png');
	    height: 100%;
		background-size: 100% 100%;
	}

	.luckTopInfo {
		position: relative;
		left: 0;
		top: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.luckrules {
			width: 100upx;
			height: 100upx;
			padding: 10upx;
			border-top-style: solid;
			border-right-style: solid;
			border-bottom-style: solid;
			border-radius: 0 16upx 16upx 0;
			border-width: 2upx;
			border-color: #000000;
			font-size: 30upx;
		}

		.lucktopImg {
			height: 194upx;
			width: 500upx;
			margin: 0 20upx;
		}

		.shareBg {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.shareImg {
			position: relative;
			top: 20upx;
			width: 30upx;
			height: 30upx;
			line-height: 30upx;
		}
	}

	.luckyInfo {
		position: relative;
		margin-top: 80rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.machineImg {
			width: 700upx;
			height: 774upx;
		}

		.winNumber {
			position: absolute;
			top: 40upx;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			color: #FFFFFF;
			font-size: 40upx;
			letter-spacing: 28upx;
		}

		.cjImg {
			position: absolute;
			top: 460upx;
			left: 0;
			right: 0;
			margin: auto;
			width: 328upx;
			height: 99upx;
		}


	}
	.prizeBg {
		position: absolute;
		top: 260upx;
		left: 0;
		right: 0;
		margin: auto;
		width: 550upx;
		height: 170upx;
		.grid-text {
			font-size: 24upx;
			color: #F17559;
		}
	}


    .playBtn {
    	position: absolute;
    	top: 200upx;
    	left: 100upx;
    	width: 340upx;
    	height: 99upx;
    }
    
    .luckdrawRecord {
    	position: absolute;
    	top: 360upx;
    	left: 0upx;
    	width: 580upx;
    	height: 99upx;
    }

	.recordBox {
		background: no-repeat url('https://sj.shopec.com.cn/image-server/cj/bottomList.png');
		background-size: 100% 80%;
		position: relative;
		top: -60rpx;
		left: 0;
		width: 700rpx;
		height: 480rpx;
		.recordBg {
			position: absolute;
			top: 40rpx;
			left: 0;
			right: 0;
			margin: auto;
			width: 600rpx;
		}
		
	}

	

</style>